/* Copyright 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

body:not(.tab-navigation) #focus-ring {
  visibility: hidden;
}

@property --focus-ring-size {
  syntax: '<length>';
  inherits: true;
  initial-value: 3px;
}

@property --focus-ring-style {
  syntax: '*';
  inherits: true;
  initial-value: default;
}

button,
input {
  --focus-ring-size: 3px;
}

.circle :is(button, input) {
  --focus-ring-style: circle;
}

#focus-ring {
  border: 2px solid var(--blue-300);
  border-radius: 4px;
  height: 0; /* Calculate at runtime. */
  left: 0; /* Calculate at runtime. */
  pointer-events: none;
  position: absolute;
  top: 0; /* Calculate at runtime. */
  transform: translate(-50%, -50%);
  width: 0; /* Calculate at runtime. */
  z-index: 99;
}

#focus-ring.circle {
  border-radius: 50%;
}

#focus-ring.pill {
  border-radius: var(--border-radius-rounded-with-short-side);
}

#focus-ring.none {
  display: none;
}
